<template>
	<div class="details-focus">
		<mt-swipe :auto="0" :show-indicators="false">
			<div v-if="defalutImg" class="defalutImg"></div>
			<mt-swipe-item v-for="item in androidImageList" track-by="$index" v-else>
				<img :src="item.sourceFullImage || item.androidMainImage || item.androidImageList" alt="{{spuName}}" />
			</mt-swipe-item>
		</mt-swipe>

	</div>

</template>

<script type="text/javascript">
	import Vue from 'vue';

	//轮播
	import Swipe from '../common/swipe';
	import SwipeItem from '../common/swipe-item';
	Vue.component(Swipe.name, Swipe);
	Vue.component(SwipeItem.name, SwipeItem);

	export default {
		data() {
				return {
					popupVisible: false,
					defalutImg: true, // 默认显示
					spuName: '', // 移动端 主图 title
					androidImageList: [], // 移动端图片列表
					isneedSwipe:true
				}
			},
			methods: {
				togglePop: function() {
					this.popupVisible = !this.popupVisible;
				}
			},
			events: {
				// 父级传递消息
				detailsFocusDataEvent: function(msg) {
					var androidImageList = '';
					var count = 0;
					for(var i in msg) {
						count++;
					}
					
					var arrObj = [];
					var ArrObj = {
					  "androidImageList": '',
					};
					
					if(count && count >= 1) {
						this.spuName = msg['spuName'];
						
						if ( typeof msg['androidImageList'] != 'string' ) {
							androidImageList = msg['androidImageList'];
						} else {
							for ( var i in ArrObj ) {
								ArrObj[i] = msg[i];
							}
							arrObj.push(ArrObj);
							androidImageList = arrObj;
						}
						this.$set('androidImageList', androidImageList);
						this.defalutImg = false;
					} else {
						this.defalutImg = true;
					}

					this.$broadcast('shownums', this.defalutImg);

				}
			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	.details-focus {
		padding-bottom: rem(10);
		overflow: hidden;
		background: $_fff;
		.defalutImg {
			font-size: rem(14);
			line-height: rem(250);
		}
		.pop {
			.mint-popup {
				top: rem(88);
				left: rem(290);
				background: $_333;
				width: rem(148);
				border-radius: rem(4);
				ul {
					li {
						a {
							display: block;
							width: rem(148);
							height: rem(38);
							padding-left: rem(15);
							line-height: rem(38);
							color: $_fff;
							font-size: rem(14);
							box-sizing: border-box;
						}
					}
					li:nth-of-type(1) {
						border-radius: rem(4) rem(4) 0 0;
						border: 1px solid $_666;
					}
				}
				.arrow {
					position: absolute;
					width: rem(25);
					height: rem(25);
					background: $_333;
					top: rem(-3);
					right: rem(5);
					transform: rotate(45deg);
				}
			}
			.v-modal {
				opacity: 0;
			}
		}
	}
</style>